<%--
  Created by IntelliJ IDEA.
  User: wwj
  Date: 2020/6/18
  Time: 13:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <%--把layui的样式引入--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <%--引入layui的js文件--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <%--引入jquery的代码引入--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/jquery-3.4.1.js"></script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

        <!-- 这里同样支持 laytpl 语法，如： -->
        {{#  if(d.auth > 2){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
        {{#  } }}
    </script>


    <!--工具栏-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn" id="addBtn">添加</button>

            <button type="button" class="layui-btn" id="delManyBtu">批量删除</button>
        </div>
    </script>
    <!--工具栏-->

    <script type="text/javascript">
        layui.use(['form','laydate','layer','table','upload'],function() {
            var form = layui.form;
            var upload = layui.upload;
            var layerIndex;
            //把form表单给渲染好了。
            var table=layui.table;
            var layer=layui.layer;
            var laydate=layui.laydate;
            //给select标签添加内容。从数据库表中把所有的部门查询出来。


            table.render({
                elem: '#MyTable'
                ,url: '${pageContext.request.contextPath}/user/selectByPage' //调用控制器得到所有要展示的数据
                ,page: true //开启分页
                ,toolbar: '#toolbarDemo'
                ,cols: [[ //表头
                    {field: 'userId', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'userName', title: '用户名',  sort: true}
                    ,{field: 'userPassword',title: '用户密码',  sort: true}
                    ,{field: 'userTelphone',title: '手机号',  sort: true}
                    ,{field: 'userImage', title: '用户头像' ,sort: true , templet:function (d) {
                            return "<img src=\"${pageContext.request.contextPath}/"+d.userImage+"\" >" }}
                    ,{field: 'userNickname', title: 'userNickname' ,sort: true }
                    ,{field: 'userSex', title: '用户性别' ,sort: true , templet:function (d) {
                            return d.userSex===0?"男":"女" }}
                    ,{field: 'userAutograph', title: '个性签名' ,sort: true }
                    ,{field: 'userProvince', title: '省会' ,sort: true }
                    ,{field: 'userCity', title: '城市' ,sort: true }
                    ,{field: 'guruId', title: 'guruId' ,sort: true }
                    ,{field: 'userStatus', title: '用户状态' ,sort: true , templet:function (d) {
                            return d.userStatus===0?"正常":"冻结" }}
                    ,{field: 'userCreateDate', title: '时间' ,sort: true }
                    ,{fixed: 'right',width:160,  align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                ]]
                , method: "post"
            });
            //把form表单结束



            //监听工具条
            table.on('tool(MyTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){

                        //向服务端发送删除指令
                        $.ajax({
                            url:"${pageContext.request.contextPath}/user/deleteUser",
                            data:"id="+data.userId,
                            dataType:"json",
                            type:"post",
                            success:function (data) {
                                if (data.dalete=true){
                                    alert("删除成功")
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                }else {
                                    alert("删除失败")
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if(layEvent === 'edit'){
                    //do something
                    layer.confirm('真的要修改么?',function (index) {
                        $.ajax({
                            url:"${pageContext.request.contextPath}/user/selectOne"
                            ,data:"id="+data.userId
                            ,type:"post"
                            ,success:function (data) {
                                console.log(data)
                                $("#Logsrc").prop("src",data.userImage);
                                form.val("updateForm",JSON.parse(JSON.stringify(data)))
                                layer.open({
                                    title:"修改",
                                    type:1,
                                    content: $("#updateForm"),
                                    area: "500px"
                                })
                            }
                        })
                    })
                }
                //修改的结束
            });
            /*table表格的操作功能结束*/


            //上传文件开始
            var uploadInst = upload.render({
                elem: '#imageID' //绑定元素
                ,url: "${pageContext.request.contextPath}/upload/upload" //上传接口
                ,accept: 'file'
                ,done: function(res){//回调函数，上传成功后会执行这个方法。res是控制器返回的map，map里面有code和res
                    if(res.code==0){
                        var fileName=res.src;
                        //后面提交表单是要把这个fileName传给数据库表
                        $("[name='userImage']").val(fileName);
                    }
                }
            });
            //上传文件结束


            //上传文件开始
            var uploadInst = upload.render({
                elem: '#imageIDS' //绑定元素
                ,url: "${pageContext.request.contextPath}/upload/upload" //上传接口
                ,accept: 'file'
                ,done: function(res){//回调函数，上传成功后会执行这个方法。res是控制器返回的map，map里面有code和res
                    if(res.code==0){
                        var fileName=res.src;
                        //后面提交表单是要把这个fileName传给数据库表
                        $("[name='userImage']").val(fileName);
                    }
                }
            });
            //上传文件结束







            //给添加按钮增加点击事件---开始
            $("#addBtn").click(function(){
                //显示弹出层
                layerIndex=layer.open({
                    type:1,
                    title:"出库",
                    area:"500px",
                    content:$("#addForm")
                });
                //alert(index);
            });
            //给添加按钮增加点击事件---结束
            //添加的form表单
            form.on('submit(addGO)', function(data){
                // $("[name='name']").val();
                // $("[name='price']").val();

                var data=$("#addForm").serialize();//自动将表单中所有   的需要传递的表单元素的值封装成我们需要的格式。key=value&key=value
                alert(data);
                //发出ajax请求。
                $.ajax({
                    url: "${pageContext.request.contextPath}/user/addUser",
                    data: data,
                    dataType:"json",
                    type:"post",
                    success:function(data){
                        if(data.insert=true){
                            alert("添加成功！");
                            table.reload("MyTable");
                        }else{
                            alert("添加失败");
                        }
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //添加的form表单


            form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                }
            });




                //给表单修改提交事件----开始
            form.on('submit(updateGo)', function(data){
                var data=$("#updateForm").serialize();//自动将表单中所有的需要传递的表单元素的值封装成我们需要的格式。key=value&key=value
                //发出ajax请求。
                $.ajax({
                    url:"${pageContext.request.contextPath}/user/updateUser",
                    data:data,
                    dataType:"json",
                    type:"post",
                    success:function(data){
                        if(data.update==true){
                            //关闭掉添加图书的弹出层
                            layer.close(layerIndex);
                            //把表单里面的数据清除掉。
                            //把jquery对象转换为dom对象。form类型的dom对象有reset方法可以对表单进行重置
                            $("#addForm").get(0).reset();
                            //弹出层提示添加成功，还要关闭
                            layer.msg("修改成功！");
                            //对table进行重新加载
                            table.reload("MyTable");
                        }else{
                            alert("修改失败");
                        }
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //给表单修改提交事件-----结束




        })

        //做搜索操作
        function doSearch() {
            //1.获取到输入框中输入的内容
            //2.重新发送请求，重新加载数据

            var $ = layui.jquery;
            var name = $("#doSearchname").val();
            var phone = $("#doSearchPhone").val();
            doSearchPhone
            //alert(username)

            //需要一个功能：让已经渲染好的table，重新加载重新展示数据
            //当需要一个功能的时候，就应该考虑layui的table模块是否定义的有方法===》到table模块的基础方法中找
            //table模块提供了一个reload方法可以实现数据重载
            //reload(ID,options);
            //其中ID:就是table标签的id，就是elem基础参数写的内容
            //options:就是基础参数;在刚刚渲染的基础上再添加的基础参数

            var table = layui.table;
            table.reload("MyTable",{where:{"userName":name,"userTelphone":phone}});
        }

    </script>
</head>
<body>






<%--搜索--%>
<div class="layui-container">
    <div class="layui-input-inline" style="width: 300px;">
    <input type="text" id="doSearchname" placeholder="请输入要搜索名字" class="layui-input"><br/>
    <input type="text" id="doSearchPhone" placeholder="请输入要搜索电话" class="layui-input">
</div>
    <button type="button" class="layui-btn" onclick="doSearch()">搜索</button>
    <table id="MyTable" lay-filter="MyTable"></table>
</div>
<%--搜索--%>

<%--<添加的开始>--%>
<form class="layui-form"  id="addForm" lay-filter="addForm"  style="display:none;padding:10px 50px 0px 10px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="userName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-block">
            <input type="text" name="userPassword" lay-verify="required"  placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="userTelphone"  lay-verify="required|phone|number"  placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">时间</label>
        <div class="layui-input-block">
            <input type="date" name="userCreateDate"  placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">用户头像</label>
        <div class="layui-input-block">
            <%--上传头像--%>
            <button type="button" class="layui-btn" id="imageID">
                <i class="layui-icon">&#xe67c;</i>用户头像
            </button>
            <input type="hidden" name="userImage" value=""/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否显示</label>
        <div class="layui-input-block">
            <input type="radio" name="userSex" value="男" title="男" checked>
            <input type="radio" name="userSex" value="女" title="女" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-block">
            <input type="text" name="userAutograph" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省会</label>
        <div class="layui-input-block">
            <input type="text" name="userProvince" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <input type="text" name="userCity" lay-verify="required"   placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">guruId</label>
        <div class="layui-input-block">
            <input type="text" name="guruId"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">是否显示</label>
        <div class="layui-input-block">
            <input type="radio" name="userStatus" value="0" title="正常" checked>
            <input type="radio" name="userStatus" value="1" title="冻结" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">时间</label>
        <div class="layui-input-block">
            <input type="date" name="userCreateDate"  placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addGO">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--<添加的结束>--%>




<%--修改图书的表单开始--%>
<form class="layui-form" style="display:none;padding:10px 50px 0px 10px" id="updateForm" lay-filter="updateForm">
    <!--对于修改操作，在提交表单的时候必须把id传递到后台-->
    <input type="hidden" name="userId" />
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="userName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-block">
            <input type="text" name="userPassword" lay-verify="required"  placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="userTelphone"  lay-verify="required|phone|number"  placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">用户头像</label>
        <div class="layui-input-block">
            <%--上传头像--%>
            <button type="button" class="layui-btn" id="imageIDS">
                <i class="layui-icon">&#xe67c;</i>用户头像
            </button>
            <input type="hidden" name="userImage" value=""/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否显示</label>
        <div class="layui-input-block">
            <input type="radio" name="userSex" value="男" title="男" checked>
            <input type="radio" name="userSex" value="女" title="女" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-block">
            <input type="text" name="userAutograph" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省会</label>
        <div class="layui-input-block">
            <input type="text" name="userProvince" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <input type="text" name="userCity" lay-verify="required"   placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <input type="text" name="guruId"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">是否显示</label>
        <div class="layui-input-block">
            <input type="radio" name="userStatus" value="0" title="正常" checked>
            <input type="radio" name="userStatus" value="1" title="冻结" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">时间</label>
        <div class="layui-input-block">
            <input type="date" name="userCreateDate"  placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateGo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--修改图书的表单结束--%>







</body>
</html>